<template>
  <div
    style="width:420px; margin: 0 auto;"
    v-loading="loading"
  >
    <template v-if="userInfo">
      <el-card shadow="never" style="margin-bottom: 20px;">
        <div slot="header" style="font-weight: 500;">用户信息</div>
        <el-row>
          <el-col :span="5">姓名</el-col>
          <el-col :span="18">{{userInfo.realName || userInfo.aliasName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">性别</el-col>
          <el-col :span="18">{{userInfo.sex == 0 ? '男' : '女'}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">年龄</el-col>
          <el-col :span="18">{{userInfo.age}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">电话号码</el-col>
          <el-col :span="18">{{userInfo.telphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">家庭地址</el-col>
          <el-col :span="18">{{userInfo.address}}</el-col>
        </el-row>
      </el-card>
      <el-button type="primary" icon="el-icon-user" plain @click="onUserDetailsClick">
        用户详情
      </el-button>
      <el-button type="danger" icon="el-icon-location" plain @click="onLocateUserClick">
        用户位置
      </el-button>
      <el-button type="success" icon="el-icon-s-order" plain @click="onPlaceOrderClick">
        快速下单
      </el-button>
      <el-button type="default" plain @click="onCloseClick">
        关闭
      </el-button>
    </template>
    <template v-else-if="!loading && !userInfo">
      <div style="text-align: center">未查询到用户信息，可能为非平台用户</div>
      <el-button type="primary" icon="el-icon-user" plain @click="onAddUserClick">
        注册用户
      </el-button>
    </template>

    <location-drawer ref="locationDrawer" />
  </div>
</template>

<script>
export default {
  components: {
    LocationDrawer: () => import('@/components/LocationDrawer')
  },
  data() {
    return {
      loading: false,
      userInfo: null,
      number: null
    };
  },
  methods: {
    loadByNumber(number) {
      this.number = number;
      this.loading = true;
      this.$http('/api/user/getUserByPhone?phone=' + number).then((user) => {
        this.userInfo = user;
        this.loading = false;
      });
    },
    onUserDetailsClick() {
      this.pushPage({
        path: '/user/details',
        params: { user: this.userInfo },
        key: this.userInfo.userId
      });
    },
    async onLocateUserClick() {
      const page = await this.$http.get('/api/stat/listDevice', {params: {telphone: this.userInfo.telphone}});
      if (page.rows.length) {
        const user = page.rows[0];
        this.$refs.locationDrawer.show({
          title: `${user.realName || user.aliasName}的位置`,
          address: user.address,
          point: {lng: user.longitude, lat: user.latitude}
        });
      }
    },
    onPlaceOrderClick() {
      window.lastCallComingUserInfo = this.userInfo;
      this.pushPage({
        path: '/shop/shop'
      });
    },
    onAddUserClick() {
      this.pushPage({
        path: '/user/register',
        title: '增加用户',
        params: {
          mode: 'add',
          values: {
            userType: 1,
            telephone: this.number
          }
        }
      });
    },
    onCloseClick() {
      this.$emit('close');
      this.userInfo = null;
    }
  }
}
</script>


<style scoped>
>>> .el-card__header {
  padding: 10px 10px;
}
.el-row {
  font-size: 14px;
  line-height: 40px;
}
.el-col-5 {
  font-weight: 500;
}

.el-button {
  display: block;
  width: 100%;
  margin: 10px auto;
}
</style>

